<template>
  <el-row>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item
      >
        <el-form-item prop="status">
          <el-select
              v-model="this.selectForm.status"
              placeholder="状态"
              clearable
          >
            <el-option label="未完成" value="0"></el-option>
            <el-option label="已完成" value="1"></el-option>
            <el-option label="未知状况" value="2"></el-option>
          </el-select>
        </el-form-item
        >
      </el-form-item>
      <el-form-item
      >
        <el-button
            type="primary"
            @click="lookOrdersByCondition(this.selectForm)"
        >搜索
        </el-button
        >
      </el-form-item>
      <el-form-item
      >
        <el-button
            type="warning"
            @click="this.deleteOrders(this.deleteOrderIds)"
        >批量删除
        </el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>
    <el-col>
      <el-table
          height="500"
          :data="tableData"
          border
          @selection-change="getOrderIds"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column
            v-for="column in this.tableColumn"
            :key="column.index"
            :label="column.label"
            :prop="column.prop"
            align="center"
            :width="column.width"
        ><!-- 状态列特殊处理 -->
          <template #default="scope" v-if="column.prop === 'status'">
            <el-tag
                class="ml-2"
                :type="
                scope.row.status === 0
                  ? 'warning'
                  : scope.row.status === 1
                  ? 'success'
                  : 'danger'
              "
            >{{
                scope.row.status === 0
                    ? "未完成"
                    : scope.row.status === 1
                    ? "已完成"
                    : "未知情况"
              }}
            </el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button size="small" @click="this.updateOrderClick(scope.row)"
            >修改
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="deleteOneOrder(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row>
    <el-col></el-col>
  </el-row>
  <!-- 修改订单 -->
  <el-dialog
      v-model="updateDialogVisible"
      title="修改订单"
      width="30%"
      center
      draggable
  >
    <el-form
        :model="updateOrderForm"
        :rules="orderRule"
        ref="updateOrder"
        @keyup.enter="this.updateOneOrder(this.updateOrderForm)"
    >
      <el-steps
          align-center="true"
          :active="
          this.updateOrderForm.status === 1
            ? 3
            : this.updateOrderForm.runner === '' ||
              this.updateOrderForm.runner === null
            ? 1
            : 2
        "
          finish-status="success"
      >
        <el-step title="用户下单"/>
        <el-step title="跑腿员接单"/>
        <el-step title="已送达"/>
      </el-steps>
      <el-form-item prop="description" label="描述">
        <el-input
            v-model="this.updateOrderForm.description"
            disabled
            :rows="2"
            type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item prop="runner" label="跑腿">
        <el-select
            v-model="this.updateOrderForm.runner"
            placeholder="选择跑腿员"
            clearable
        >
          <el-option
              v-for="item in runnerMap"
              :key="item.key"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="status" label="状态">
        <el-radio-group v-model="this.updateOrderForm.status" size="small">
          <el-radio :label="0">未完成订单</el-radio>
          <el-radio :label="1">完成订单</el-radio>
          <el-radio :label="2">未知情况</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateDialogVisible = false">取消</el-button>
      <el-button
          type="primary"
          @click="this.updateOneOrder(this.updateOrderForm)"
      >修改
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import {
  lookAllOrders,
  updateOneOrder,
  deleteOrder,
  lookOrdersByCondition,
} from "../api/order";
import {lookUserByRole} from "../api/user";

export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //查询数据
      selectForm: {
        status: "",
      },
      //查询需要的订单Id
      orderId: "",
      //修改时需要的表单元素
      updateOrderForm: {
        id: "",
        runner: "",
        status: "",
      },
      //修改对话框是否显示
      updateDialogVisible: false,
      //批量删除时的id集合
      deleteOrderIds: [],
      //表单校验
      orderRule: {
        description: [
          {
            required: true,
            message: "请输入订单描述!",
            trigger: "blur",
          },
        ],
        //跑腿员
        runner: [
          {
            required: true,
            message: "请选择跑腿员!",
            trigger: "blur",
          },
        ],
        //订单状态
        status: [
          {
            required: true,
            message: "请设置订单状态!",
            trigger: "blur",
          },
        ],
      },
      //跑腿员列表
      runnerMap: [],
      //列宽
      defaultColumn: 250,
      //表格列名集合
      tableColumn: [
        {
          index: 1,
          label: "编号",
          prop: "id",
          width: 55,
        },
        {
          index: 2,
          label: "订单描述",
          prop: "description",
          width: 120,
        },
        {
          index: 3,
          label: "状态",
          prop: "status",
          width: 120,
        },
        {
          index: 4,
          label: "发起人",
          prop: "user",
          width: 120,
        },
        {
          index: 5,
          label: "跑腿员",
          prop: "runner",
          width: 120,
        },
      ],
    };
  },
  created() {
    this.lookAllOrder();
    this.lookUserByRole(3);
  },
  methods: {
    //查看所有订单逻辑
    lookAllOrder() {
      lookAllOrders().then((req) => {
        this.tableData = req.data.data;
        console.log(this.tableData);
      });
    },
    //条件查询订单
    lookOrdersByCondition(order) {
      console.log(order);
      if (order === "") {
        this.lookAllOrder();
        return;
      }
      lookOrdersByCondition(order).then((req) => {
        this.tableData = req.data.data;
      });
    },
    //根据角色查询用户
    lookUserByRole(role) {
      lookUserByRole(role).then((req) => {
        var roles = req.data.data;
        for (let i = 0; i < roles.length; i++) {
          var a = {
            key: i,
            value: roles[i].id,
            label: roles[i].name,
            address: roles[i].address,
          };
          this.runnerMap.push(a);
        }
        console.log(this.roles);
      });
    },
    //修改一名订单
    updateOneOrder(obj) {
      console.log(obj);
      this.$refs["updateOrder"].validate((valid) => {
        if (valid) {
          updateOneOrder(obj).then((req) => {
            if (req.data.success) {
              this.$message({
                type: "success",
                message: "修改订单成功!",
                showClose: true,
              });
              this.updateDialogVisible = false;
              this.lookAllOrder();
            } else {
              this.$message({
                type: "error",
                message: "修改订单失败!",
                showClose: true,
              });
            }
          });
        }
      });
    },
    //删除一条订单信息
    deleteOneOrder(ids) {
      var id = [ids];
      this.$confirm("你真的要删除这条订单的信息吗?(真的永久)", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteOrder(id).then((req) => {
          if (req.data.success) {
            this.$message({
              type: "success",
              message: "删除订单成功!",
              showClose: true,
            });
            this.lookAllOrder();
          } else {
            this.$message({
              type: "error",
              message: "删除订单失败!请检查该订单是否存在学生!",
              showClose: true,
            });
          }
        });
      });
    },
    //批量删除
    deleteOrders(ids) {
      console.log(ids);
      this.$confirm(`你真的要删除${ids.length}条订单的信息吗?(真的永久)`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteOrder(ids).then((req) => {
          if (req.data.success) {
            this.$message({
              type: "success",
              message: "删除订单成功!",
              showClose: true,
            });
            this.lookAllOrder();
          } else {
            this.$message({
              type: "error",
              message: "删除订单失败!",
              showClose: true,
            });
          }
        });
      });
    },
    //修改订单前的附加操作
    updateOrderClick(obj) {
      this.updateOrderForm = obj;
      console.log(obj);
      this.updateDialogVisible = true;
    },
    //获取选中的Id值
    getOrderIds(val) {
      var ids = [];
      for (let i = 0; i < val.length; i++) {
        ids[i] = val[i].id;
      }
      this.deleteOrderIds = ids;
    },
  },
};
</script>

<style>
</style>